<template>
  <div class="swiper_container">
    <swiper :options="swiperOption_1">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
      <!--<div class="swiper-pagination" slot="pagination"></div>-->
      <div class="swiper-button-prev swiper-button-prev-1" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-next-1" slot="button-next"></div>
    </swiper>
    <swiper :options="swiperOption_2">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
      <!--<div class="swiper-pagination" slot="pagination"></div>-->
      <div class="swiper-button-prev swiper-button-prev-2" slot="button-prev"><</div>
      <div class="swiper-button-next swiper-button-next-2" slot="button-next">></div>
    </swiper>
  </div>
</template>

<script>
    import 'swiper/dist/css/swiper.css'
    import {swiper, swiperSlide} from 'vue-awesome-swiper'
    export default {
        name: "VueSwiper",
        components: {swiper, swiperSlide},
        data() {
          return {
            swiperOption_1: {
              slidesPerView: 3,
              spaceBetween: 30,
              slidesPerGroup: 3,
              loop: true,
              loopFillGroupWithBlank: false,
              navigation: {
                nextEl: '.swiper-button-next-1',
                prevEl: '.swiper-button-prev-1'
              }
            },
            swiperOption_2: {
              slidesPerView: 3,
              spaceBetween: 30,
              slidesPerGroup: 3,
              loop: true,
              loopFillGroupWithBlank: true,
              navigation: {
                nextEl: '.swiper-button-next-2',
                prevEl: '.swiper-button-prev-2'
              }
            }
          }
        }
    }
</script>

<style>
  .swiper-button-prev-2{
    background-image: none;
  }
</style>
